<template>
    <div class="wrapper fon_14 mar_t20">
        <div class="orderlist">
            <div class="ordercard" v-for="(item,index) in list" :key="index">
                <div class="cardheader flex">
                    <div class="daysn"><span>{{item.takeNo}}</span></div>
                    <div class="flex-1 pad_10">
                        <div class="headertext fon_14 flex-bet">
                            <div>
                                <span v-if="item.deliveryMode!='10'"><span class="yu" v-show="item.appointment=='1'">[预]</span>  {{item.serviceAt}}</span>
                                <span v-else>
                                    <span class="yu" v-show="item.appointment=='1'">[预]</span>
                                    <span class="ziti">[自提]</span> 自提时间：{{item.serviceAt}}
                                </span>
                            </div>
                            <div class="pad_r_10">
                                <span v-if="item.state=='1'">未付款</span>
                                <span v-else-if="item.state=='2'">已付款</span>
                                <span v-else-if="item.state=='3'">已接单</span>
                                <span v-else-if="item.state=='4' && item.deliveryMode!='10'">配送中</span>
                                <span v-else-if="item.state=='4' && item.deliveryMode=='10'">自提待取餐</span>
                                <span v-else-if="item.state=='5'">订单已完成</span>
                                <span v-else-if="item.state=='6'">已评价</span>
                                <span v-else-if="item.state=='7'">已取消</span>
                                <span v-else-if="item.state=='8'">已拒单</span>
                                <span v-else-if="item.state=='9'">申请退款</span>
                                <span v-else-if="item.state=='10'">已退款</span>
                                <span v-else-if="item.state=='11'">退款拒绝</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mar_lr20 pad_tb_20 borderbottome7 flex flex-y-top">
                    <div class="containertitle">
                        <img class="wid ordericon mar_t5" src="@/assets/img/order/user.svg"/>
                    </div>
                    <div class="flex-bet wid">
                        <div class="flex-g-1">
                            <div class="flex">
                                <div class="mar_r10 font_w700 lh1">{{item.receivedName}}</div>
                                <span href="#" class="spanlink mar_r10 subjectcolor2">{{item.receivedTel}}</span>
                                <!--                                <span class="color_8 mar_r10">超级会员</span>-->
                                <span class="color_8 ">近180天第{{item.payNum}}次下单</span>
                            </div>
                            <div class="flex mar_t10" v-show="item.deliveryMode!=10">
                                <div>{{item.receivedAddress}}</div>
                                <a href="#" class="spanlink mar_l10"
                                   @click="openMap(item.lat,item.lng,item.receivedAddress)">查看地图</a>
                            </div>
                        </div>
                        <!--                        <div class="flex-g-0 spanlink">用户上次评价</div>-->
                    </div>
                </div>
<!--                <div class="borderbottome7 mar_lr20 pad_tb_20 flex" v-if="item.state>=3 && item.state<4">-->
<!--                    <div class="containertitle">-->
<!--                        <img class="wid ordericon mar_t5" src="@/assets/img/order/beican.png"/>-->
<!--                    </div>-->
<!--                    <div class="flex-bet wid">-->
<!--                        <div class="flex-g-1">-->
<!--                            备餐用时 <span ref="startTimer">1</span>-->
<!--                        </div>-->
<!--                        <div class="flex-g-0 spanlink">-->
<!--                            <el-button type="primary" round class="qrcc" @click="orderListQrch(item)">确认出餐</el-button>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
                <div class="borderbottome7 mar_lr20 pad_tb_20 flex" v-if="item.state>=3">
                    <div class="containertitle">
                        <img class="wid ordericon mar_t5" src="@/assets/img/order/peisong.svg"/>
                    </div>
                    <div class="flex-bet wid" v-if="item.state==3 && item.deliveryMode!=10">
                        <div class="flex-g-1">
                            <span class="color_2 font_w700">待配送</span>
                        </div>
                        <div class="flex-g-0 spanlink">
                            <el-button plain class="qrsc"  @click="modifyOrder(item,'delivery')">确认送出</el-button>
                        </div>
                    </div>
                    <div class="flex-bet wid" v-if="item.state==4 && item.deliveryMode!=10">
                        <div class="flex-g-1 flex-bet">
                            <div class="color_2 font_w700">配送中</div>
                            <div>
                                <span v-if="item.deliveryMode=='1'">商户</span>
                                <span v-else-if="item.deliveryMode=='2'">达达</span>
                                <span v-else-if="item.deliveryMode=='3'">点我达</span>
                                <span v-else-if="item.deliveryMode=='4'">码科配送</span>
                                <span v-else-if="item.deliveryMode=='5'">顺丰</span>
                                <span v-else-if="item.deliveryMode=='6'">蜂鸟</span>
                                <span v-else-if="item.deliveryMode=='7'">闪送</span>
                                <span v-else-if="item.deliveryMode=='10'">自提</span>
                            </div>
                        </div>
                    </div>
                    <div class="flex-bet wid" v-if="item.state==5 && item.deliveryMode!=10">
                        <div class="flex-g-1">
                            <span class="color_2 font_w700">已完成</span>
                        </div>
                    </div>
                    <div class="flex-bet wid" v-if="item.deliveryMode==10">
                        <div class="flex-g-1">
                            <span class="color_2 font_w700">自提码：{{item.selfCode}}</span>
                        </div>
                    </div>
                </div>
                <div class="borderbottome7 mar_lr20 pad_tb_20 flex flex-y-top">
                    <div class="containertitle">
                        <img class="wid ordericon mar_t5" src="@/assets/img/order/zhedie.svg"/>
                    </div>
                    <div class="flex wid">
                        <div class="flex-g-1">
                            <el-collapse accordion v-model="activeNames">
                                <el-collapse-item name="1">
                                    <template slot="title">
                                        <span class="color_2 font_w700">{{item.num}}件商品</span>
                                    </template>
                                    <div class="collapsemain">
                                        <div class="flex mar_b10">
                                            <div class="color-orange">备注：</div>
                                            <div class="mar_l5" v-if="item.userNote">{{item.userNote}}</div>
                                            <div class="mar_l5" v-else>无</div>
                                        </div>
                                        <div class="flex goods" v-for="(goods,pindex) in item.goodsArr" :key="pindex">
                                            <div class="flex wid bordertop7">
                                                <div class="flex wid goodscon">
                                                    <div class="bflex-9">{{goods.name}}
                                                        <span v-show="goods.data">-{{goods.data}}</span>
                                                        <span v-show="goods.material">【{{goods.material}}】</span>
                                                        <span v-show="goods.attribute">【{{goods.attribute}}】</span>
                                                    </div>
                                                    <div class="bflex-1 color_5">X{{goods.num}}</div>
                                                    <div class="bflex-1 color_5 t_r">{{goods.money}}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="bordertop7 goods">
                                            <div class="mar_t10 fon_12 color_8">其他</div>
                                            <div class="flex wid goodscon">
                                                <div class="bflex-4">包装费</div>
                                                <div class="bflex-2 color_5"></div>
                                                <div class="bflex-1 color_5 t_r">{{item.boxMoney}}</div>
                                            </div>
                                            <div class="flex wid goodscon">
                                                <div class="bflex-4">配送费</div>
                                                <div class="bflex-2 color_5"></div>
                                                <div class="bflex-1 color_5 t_r">{{item.deliveryMoney}}</div>
                                            </div>
                                        </div>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </div>
                    </div>
                </div>
                <div class="borderbottome7 mar_lr20 pad_tb_20 flex">
                    <div class="containertitle">
                        <img class="wid ordericon mar_t5" src="@/assets/img/order/shifu.svg"/>
                    </div>
                    <div class=" wid">
                        <div class="flex-bet">
                            <div class="flex-g-1">
                                <span class="color_2">顾客实付</span>
                            </div>
                            <div class="flex-g-0 color_5 flex">
                                <div class="mar_r10">已支付</div>
                                <div class="font_w700"> ¥ {{item.money}}</div>
                            </div>
                        </div>
                        <div class="flex-bet mar_t10">
                            <div class="flex-g-1">
                                <div class="color_2 rel">本单预计收入
                                    <span class="ab tooltip">
                                                    <el-tooltip class="item" effect="dark" placement="top-start">
                                                    <div slot="content" class="tooltext">
                                                        <div class="flex-bet"><p>商品价格：</p><p class="pad_l_30">{{item.originMoney}}</p></div>
                                                        <div class="flex-bet"><p>配送费：</p><p>{{item.deliveryMoney}}</p></div>
                                                        <div class="flex-bet"><p>包装费：</p><p>{{item.boxMoney}}</p></div>
<!--                                                        <div class="flex-bet"><p>满减优惠：</p><p>-0.00</p></div>-->
<!--                                                        <div class="flex-bet"><p>优惠券优惠：</p><p>-0.00</p></div>-->
<!--                                                        <div class="flex-bet"><p>新客立减：</p><p>-0.00</p></div>-->
<!--                                                        <div class="flex-bet"><p>减免配送费：</p><p>-0.00</p></div>-->
<!--                                                        <div class="flex-bet"><p>平台服务费：</p><p>-0.00</p></div>-->
                                                        <div class="flex-bet"><p>本单收入：</p><p>{{item.storeActualMoney}}</p></div>
                                                    </div>
                                                    <button type="button"
                                                            class="el-button question-button-tooltip el-tooltip item el-button--text fon_14 ab"
                                                            style="right: -40px;top: -5px;">
                                                        <span><i class="el-icon-question"></i></span>
                                                    </button>
                                                </el-tooltip>
                                                </span>
                                </div>
                            </div>
                            <div class="flex-g-0 color_5 flex">
                                <div class="font_w700 color-red"> ¥ {{item.storeActualMoney}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="borderbottome7 mar_lr20 pad_tb_20 flex">
                    <div class="containertitle">

                    </div>
                    <div class="flex-bet wid">
                        <div class="flex-g-1">
                            <div class="color_8 fon_12">下单时间: {{item.createdAt}}</div>
                            <div class="color_8 fon_12">订单号: {{item.outTradeNo}}</div>
                        </div>
                        <div class="flex-g-0 spanlink flex">
                            <div v-show="item.state==2">
                                <el-button plain class="qrsc" @click="modifyOrder(item,'rejection')">拒单</el-button>
                                <el-button class="qrsc" style="width: 100px;" type="primary" @click="modifyOrder(item,'receipt')">接单</el-button>
                            </div>
                            <div v-show="item.state>3 && item.state<4">
                                <el-button plain class="qrsc">取消订单</el-button>
                            </div>
                            <div v-show="item.state>2">
                                <el-button plain class="qrsc" @click="modifyOrder(item,'print')">打印</el-button>
                            </div>
                            <div v-show="item.state==4 && item.deliveryMode!=10" class="mar_l20">
                                <el-button  @click="modifyOrder(item,'confirm')">确认收货</el-button>
                            </div>
                            <div v-show="item.state==3 || item.state==4" class="mar_l20">
                                <el-button @click="modifyOrder(item,'refund')">退款</el-button>
                            </div>
                            <div v-show="item.state==9"  class="mar_l20">
                                <el-button plain class="qrsc" @click="modifyOrder(item,' adoptRefund')">同意退款</el-button>
                                <el-button plain class="qrsc" @click="modifyOrder(item,' refuseRefund')">拒绝退款</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <selectmap-dialog ref="selectmapDialog" :mapLng='form.lng' :mapLat='form.lat'
                              :mapAddress='form.address'></selectmap-dialog>
        </div>
    </div>
</template>

<script>
    import selectmapDialog from "@/plugins/selectmapDialog";
    import {modifyOrder} from "@/api/order";
    import { mapMutations } from 'vuex';
    export default {
        props: {
            list: {
                type: Array,
                // default: () => {
                //     return null;
                // },
            },
        },
        components: {selectmapDialog},
        created() {
            // this.timer = setInterval(this.startTimer, 1000);
        },
        name: "orderlist",
        data() {
            return {
                activeNames: '1',
                form: {
                    lng: 114.304692,
                    lat: 30.59331,
                    address: '湖北省武汉市',
                },
                timer: "",
                content: "",
                hour: 0,
                minutes: 0,
                seconds: 0
            }
        },
        methods: {
            // startTimer () {
            //     this.seconds += 1;
            //     if (this.seconds >= 60) {
            //         this.seconds = 0;
            //         this.minute = this.minute + 1;
            //     }
            //
            //     if (this.minute >= 60) {
            //         this.minute = 0;
            //         this.hour = this.hour + 1;
            //     }
            //     this.$refs.startTimer.innerHTML = (this.minutes < 10 ? '0' + this.minutes : this.minutes) + ':' + (this.seconds < 10 ? '0' + this.seconds : this.seconds);
            // },
            ...mapMutations(['updataOrderNumber']),
            openMap(lat, lng, receivedAddress) {
                if (lat && lng && receivedAddress) {
                    this.form.lat = +lat
                    this.form.lng = +lng
                    this.form.address = receivedAddress
                    this.$refs['selectmapDialog'].dialogVisible = true
                } else {
                    this.$baseMessage('请检查地址经纬度', 'warning');
                }
            },
            async modifyOrder(row, type) {
                    const {msg} = await modifyOrder({'orderId': row.id, type,});
                    this.updataOrderNumber(JSON.stringify(new Date()))
                    this.$baseMessage(msg, "success");
                    this.$emit('initMethod')
            },
            orderListQrch(param,item){
                console.log('234',param,item)
            },
        }
    };
</script>
<style lang="scss">
    .el-collapse-item__header {
        height: 28px;
        line-height: 28px;
        border: none;
    }

    .el-collapse-item__wrap {
        border: none;
    }
</style>
<style lang="scss" scoped>
    /*订单详情*/
    .orderlist {
        position: relative;
        /*padding-bottom: 45px;*/
        flex: 1 1 0px;
    }

    .ordercard {
        color: rgb(45, 47, 51);
        word-break: break-all;
        box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 4px;
        background: rgb(255, 255, 255);
        margin: 0px 0px 30px;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(231, 235, 245);
        border-image: initial;
        border-radius: 4px;
        animation: 0.3s ease 0s 1 normal none running cardFadeIn-data-v-1bb63870;
    }

    .cardheader {
        font-size: 16px;
        line-height: 20px;
        min-height: 40px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        background: rgb(240, 243, 249);
    }

    .cardheader .daysn {
        margin-left: 20px;
        min-width: 41px;
        font-size: 24px;
        font-weight: 700;
        padding: 0px 10px 0px 0px;
        color: #1989fa;
    }

    .column {
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
    }

    .flex-1 {
        flex: 1 1 0px;
    }

    .yu {
        color: #f5a300;
    }
    .ziti{
        color: #FA5555;
    }

    .bordertop7 {
        border-top: 1px solid #e7ebf5;
    }

    .borderbottome7 {
        border-bottom: 1px solid #e7ebf5;
    }

    .containertitle {
        width: 50px;
    }

    .ordericon {
        width: 16px;
        height: 16px;
    }

    .qrcc, .qrsc {
        height: 40px;
        line-height: 14px;
    }

    .el-collapse {
        border: none;
    }

    .goods .goodscon {
        padding: 8px 0;
    }

    .goods .goodscon:hover {
        background: #f0f3f9;
    }

    .tooltip {
        top: -5px;
        left: 64px;
    }

    .tooltext {
        line-height: 28px;
        padding: 0 6px;
    }

    .el-button--text {
        color: rgb(45, 47, 51);
    }
</style>
